<template>
    <div :style="wrapperStyle">
        <v-chart :option="option" :theme="theme" :autoresize="autoresize" :loading="loading" v-bind="$attrs" />
    </div>
</template>

<script setup>
import { defineProps, computed } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'

import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts'

import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, DatasetComponent, ToolboxComponent, DataZoomComponent } from 'echarts/components'

use([
    CanvasRenderer,
    BarChart,
    LineChart,
    PieChart,
    ScatterChart,
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DatasetComponent,
    ToolboxComponent,
    DataZoomComponent
])

const props = defineProps({
    option: {
        type: Object,
        required: true
    },
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '400px'
    },
    autoresize: {
        type: Boolean,
        default: true
    },
    theme: {
        type: String,
        default: undefined // 'light' | 'dark' | 自定义主题
    },
    loading: {
        type: Boolean,
        default: false
    }
})

const wrapperStyle = computed(() => ({
    width: props.width,
    height: props.height
}))
</script>